<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dodou-移动框架-商品列表</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="css/weui.css">
	<link rel="stylesheet" href="css/jquery-weui.css">
	<link rel="stylesheet" href="css/style.css">
  <style>
    .products-list .weui-media-box_appmsg .weui-media-box__hd{
        width: 80px;
        height: 80px;
    }
    .products-list .weui-media-box{
    	padding:10px;
    }
    .products-list .weui-media-box__title{
		font-size: 15px;
		padding-right: 48px;
		white-space:normal;
		line-height: 20px; 
		min-height: 54px;
		display: -webkit-box; 
		-webkit-box-align:center; 
		-moz-box-align:center; 
		position: relative;
	}
	.products-list .weui-media-box__title .delete{
		position: absolute;
		right: 0;
		top: 50%;
		color:#898a8a;
		-webkit-transform:translate(0,-50%);
		background:url(images/icon28.png) no-repeat;
		background-size: 24px;
		width: 24px;
		height: 24px;

	}
    .products-list .weui-cell:before{
    	border-top: none;
    }
    .products-list .weui-cell{
    	padding:0 10px 10px;
    }
    .products-list .weui-cell__ft{
    	color:#e3313d;
    }
    .products-list .total{
    	padding:10px 0;
    	margin:0 10px;
    	border-top: 1px solid #ececec;
    }
    .quantity{
    	border:1px solid #c7c7c7;
    	height: 35px;
    	display: inline-block;
    	overflow: hidden;
    	border-radius: 3px;
    }
    .quantity a{
    	width: 35px;
    	height: 35px;
    	line-height: 35px;
    	display: inline-block;
    	font-size: 20px;
    	text-align: center;
    }

	.quantity a:not(.weui-btn_disabled):active {
	    background-color: #ececec;
	}
    .quantity input{
    	width: 50px;
    	height: 35px;
    	text-align: center;
    	border:none;
    	vertical-align: top;
    	font-size: 16px;
    }
    .quantity .subtract{
    	border-right: 1px solid #c7c7c7;
    }
    .quantity .plus{
    	border-left: 1px solid #c7c7c7;
    }
  </style>
</head>
<body style="background:#f3f3f3;">
   <div class="weui-panel weui-panel_access products-list">
	  <div class="weui-panel__bd">
	    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
	      <div class="weui-media-box__hd">
	        <img class="weui-media-box__thumb" src="images/temp/9.jpg">
	      </div>
	      <div class="weui-media-box__bd">
	        <div class="weui-media-box__title"> 薇拉风秋冬中长款女春秋裙薇拉风秋冬中长款女春秋裙
	        <div class="delete"></div>
	        </div>
	        <p class="weui-media-box__desc">颜色：白色; 尺码：M</p>
	      </div>
	    </a>
	    <div class="weui-cell">
		    <div class="weui-cell__bd">
		      <div class="price">￥399.00</div>
		    </div>
		    <div class="weui-cell__ft">
		    	<div class="quantity">
			    	<a href="javascript:void(0);" class="subtract">-</a><input type="tel" value="3"><a href="javascript:void(0);" class="plus">+</a>
			    </div>
		    </div>
	    </div>
	    <div class="weui-cell total">
		    <div class="weui-cell__bd"></div>
		    <div class="weui-cell__ft">
		    	小计：￥<span>798</span>.00
		    </div>
	    </div>
	  </div>
	</div>
	<div class="weui-panel weui-panel_access products-list">
	  <div class="weui-panel__bd">
	    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
	      <div class="weui-media-box__hd">
	        <img class="weui-media-box__thumb" src="images/temp/6.jpg">
	      </div>
	      <div class="weui-media-box__bd">
	        <div class="weui-media-box__title"> 薇拉风秋冬中长款
	        <div class="delete"></div>
	        </div>
	        <p class="weui-media-box__desc">颜色：白色; 尺码：M</p>
	      </div>
	    </a>
	    <div class="weui-cell">
		    <div class="weui-cell__bd">
		      <div class="price">￥399.00</div>
		    </div>
		    <div class="weui-cell__ft">
		    	<div class="quantity">
			    	<a href="javascript:void(0);" class="subtract">-</a><input type="tel" value="3"><a href="javascript:void(0);" class="plus">+</a>
			    </div>
		    </div>
	    </div>
	    <div class="weui-cell total">
		    <div class="weui-cell__bd"></div>
		    <div class="weui-cell__ft">
		    	小计：￥<span>798</span>.00
		    </div>
	    </div>
	  </div>
	</div>
    

<script src="js/jquery.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/fastclick.js"></script>
<script>
$(document).on("click", ".delete", function() {
    $.confirm("您确定要删除该商品吗?", "确认删除?", function() {
      $.toast("删除成功!");
    }, function() {
      //取消操作
    });
});

$.toast.prototype.defaults.duration = 800;
$(function() {
	FastClick.attach(document.body);
});

</script>


</body>
</html>